<template>
    <div class="goods" ref="goods">
        <div class="left-wrapper">
            <ul>
                <li class="left-item"
                    v-for="(good, index) in goodsT"
                    :key="index"
                    @click="menu(index)"
                    :class="{active:index === activeIndex}">
                    {{ good.name }}
                </li>
            </ul>
        </div>
        <div class="right-wrapper">
            <van-list
                    v-model="loading[activeIndex]"
                    :finished="finished[activeIndex]"
                    @load="onLoad">
                <van-cell
                        v-for="(good, key) in goodsA[activeIndex]"
                        :key="key"
                        class="cell"
                >
                    <img :src="good.pic" @click="toDetail(good.id)">
                    <div class="g-body" @click="toDetail(good.id)">
                        <h3>{{good.name}}</h3>
                        <div class="des">{{good.des}}</div>
                        <div class="price">￥<span>{{good.price}}</span></div>
                    </div>
                    <svg class="cart" aria-hidden="true" @click="add(good)">
                        <use xlink:href="#icon-sy_gwc"></use>
                    </svg>
                </van-cell>
            </van-list>
            <p v-if="finished[activeIndex]" class="no-more">敬请期待更多产品</p>
            <!--<div class="right-item food-list-hook" v-for="(good, key) in goodsA" :key="key">-->
            <!--</div>-->
        </div>
        <choose-attr></choose-attr>
    </div>
</template>

<script type="text/ecmascript-6">
    import ChooseAttr from './chooseAttr.vue';

    export default {
        components: {ChooseAttr},
        name: 'slide',
        data() {
            return {
                goodsT: [],
                activeIndex: 0,
                loading: [],
                finished: [], // 是否到底
                page: [], // 请求页数
                goodsA: []
            };
        },
        computed: {},
        props: {
            allGoods: Object,
            tabIndex: Number,
            active: Number
        },
        created() {
            this.activeIndex = this.active;
            this.goodsT = this.allGoods.child;
            this.goodsA = new Array(this.allGoods.child.length).fill([]);
            this.page = new Array(this.allGoods.child.length).fill(0);
            this.finished = new Array(this.allGoods.child.length).fill(false);
            this.loading = new Array(this.allGoods.child.length).fill(false);
            this.onLoad();
        },
        watch: {
            active(val) {
                this.activeIndex = val;
            }
        },
        mounted() {
        },
        methods: {
            toDetail(id) {
                this.$store.commit('region', 'normal');
                this.$router.push(
                    {
                        name: 'good-detail',
                        query: {
                            id: id,
                            region: 'normal',
                            tab: this.tabIndex,
                            active: this.activeIndex
                        }
                    });
            },
            onLoad() {
                // console.log(555, 'onLoad');
                if (this.finished[this.activeIndex] === false) {
                    // 异步更新数据
                    // setTimeout(() => {
                    // }, 500);
                    let all = {
                        page: this.page[this.activeIndex],
                        size: 6,
                        tid: this.goodsT[this.activeIndex].tid,
                        type: 'simple'
                    };
                    this.page[this.activeIndex]++;
                    this.$emit('over', this.loading[this.activeIndex]);
                    this.loading[this.activeIndex] = true;
                    // 点击左侧分类，activeIndex会更新，为避免异步数据混乱，定义一个activeIndex变量
                    let activeIndex = this.activeIndex;
                    this.$Sale.product(all).then(res => {
                        this.$set(this.goodsA, activeIndex, this.goodsA[activeIndex].concat(res.data));
                        // console.log(1111, this.goodsA);
                        this.loading[activeIndex] = false;
                        this.$emit('over', false);
                        if (res.data.length < 6) {
                            this.finished[activeIndex] = true;
                        }
                    }, () => {
                    });
                }
            },
            menu(idx) {
                this.activeIndex = idx;
                // 切换分类，列表栏自动滚动至顶部
                this.$refs.goods.scrollTop = 0;
                if (this.goodsA[idx].length === 0) {
                    this.onLoad();
                }
            },
            add(good) {
                this.$store.commit('goodAttr', good);
                this.$store.commit('showAttr', true);
                this.$store.commit('region', 'normal');
            }
        }
    };
</script>

<style lang="stylus" rel="stylesheet/stylus">
    @import "../../assets/stylus/main.styl";
    .goods
        display: flex;
        position: fixed;
        top: vw(35);
        bottom: 0;
        width: 100%;
        overflow-y auto
        .left-wrapper
            width: vw(85)
            height vw(50)
            line-height vw(50)
            text-align center
            font-size vw(14)
            color #999
            ul{
                width: vw(85)
                position fixed
                left:0
                overflow-y auto
                height:100%
            }
            .active
                background-color #fff
                color main-color
        .right-wrapper
            position relative
            background-color #fff
            width vw(290)
            .no-more
                word-vw(12, third-ash);
                flex-center();
                padding-bottom: 5vw;
                background-color #fff
                padding-top vw(30)
            .van-cell
                padding 0
            .van-cell__value
                display flex
                position relative
                padding 0 vw(20)
                margin-top vw(10)
                img
                    width vw(100)
                    height vw(100)
                    margin-right vw(10)
                .cart
                    width vw(15)
                    height vw(15)
                    fill #999
                    position absolute
                    right vw(20)
                    bottom vw(7)
                .g-body
                    flex 1
                    h3
                        font-size vw(14)
                        color #333
                        margin-top vw(5)
                    .des
                        font-size vw(10)
                        color #999
                        margin-top vw(5)
                    .price
                        font-size vw(12)
                        color main-color
                        margin-top vw(15)
                        span
                            font-size vw(16)

</style>
